<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./font/iconfont.css">

</head>

<body>
  <div class="app">
    <!-- 头部 -->
    <div class="top">
      <p class="p1">
        <span class="iconfont icon-fangdajing"></span>
        <input type="text" placeholder="天梭">
        <span class="search">搜索</span>
      </p>
      <!-- 相机 -->
      <p class="p2">
        <span class="iconfont icon-weibiaoti1"></span>
        <span>拍照搜</span>
      </p>
    </div>
    <!-- 中间-主体 -->
    <div class="main">
      <!-- 1-advertisement[广告-标题] -->
      <div class="ad">
        <img src="./images/ad01.png" alt="">
        <!-- <img src="./images/ad2.png" alt=""> -->
        <h3>实物鉴别 严选正品优质店铺</h3>
      </div>
      <!-- 2-广告内容 -->
      <ul class="ad_con">
        <li>
          <!-- 广告内容上 -->
          <p class="ad_p1">
            <span class="iconfont icon-xianweijing"></span>
            <span>&nbsp;专业鉴别</span>
          </p>
          <!-- 广告内容-下 -->
          <p class="ad_p2">"国家队"中检合作</p>
        </li>
        <li>
          <!-- 广告内容上 -->
          <p class="ad_p1">
            <span class="iconfont icon-renzhengguanli"></span>
            <span>&nbsp;店铺查验</span>
          </p>
          <!-- 广告内容-下 -->
          <p class="ad_p2">累计113,232次</p>
        </li>
        <li>
          <!-- 广告内容上 -->
          <p class="ad_p1">
            <span class="iconfont icon-xinheart256"></span>
            <span>&nbsp;安心购买</span>
          </p>
          <!-- 广告内容-下 -->
          <p class="ad_p2">真实假一赔三</p>
        </li>
      </ul>
      <!-- 3-商品主体[白底]-横向滚动 -->
      <div class="goods">
        <ul>
          <li>
            <p>
              <img src="./images/pro1.png" alt="">
              <span>鞋类</span>
            </p>
            <p>
              <img src="./images/pro2.png" alt="">
              <span>手表</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro3.png" alt="">
              <span>服饰</span>
            </p>
            <p>
              <img src="./images/pro4.png" alt="">
              <span>首饰配件</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro5.png" alt="">
              <span>手机数码</span>
            </p>
            <p>
              <img src="./images/pro6.png" alt="">
              <span>食品饮料</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro7.png" alt="">
              <span>护肤彩妆</span>
            </p>
            <p>
              <img src="./images/pro8.png" alt="">
              <span>营养保健</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro9.png" alt="">
              <span>箱包</span>
            </p>
            <p>
              <img src="./images/pro10.png" alt="">
              <span>模玩盲盒</span>
            </p>
          </li>
          <!-- 复制一轮 -->
          <li>
            <p>
              <img src="./images/pro1.png" alt="">
              <span>鞋类</span>
            </p>
            <p>
              <img src="./images/pro2.png" alt="">
              <span>手表</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro3.png" alt="">
              <span>服饰</span>
            </p>
            <p>
              <img src="./images/pro4.png" alt="">
              <span>首饰配件</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro5.png" alt="">
              <span>手机数码</span>
            </p>
            <p>
              <img src="./images/pro6.png" alt="">
              <span>食品饮料</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro7.png" alt="">
              <span>护肤彩妆</span>
            </p>
            <p>
              <img src="./images/pro8.png" alt="">
              <span>营养保健</span>
            </p>
          </li>
          <li>
            <p>
              <img src="./images/pro9.png" alt="">
              <span>箱包</span>
            </p>
            <p>
              <img src="./images/pro10.png" alt="">
              <span>模玩盲盒</span>
            </p>
          </li>
        </ul>
      </div>
      <!-- 4-广告图和广告列表 -->
      <div class="ad_02">
        <!-- 广告图 -->
        <img src="./images/ad02.png" alt="">
        <!-- 广告列表 -->
        <ul class="ad_list">
          <li>
            <!-- 左文 -->
            <p class="list_p1">
              <span>全网特卖</span>
              <span>每日必抢</span>
            </p>
            <!-- 右图 -->
            <p class="list_p2">
              <img src="./images/a01.png" alt="">
            </p>
          </li>
          <li>
            <!-- 左文 -->
            <p class="list_p1">
              <span>每日抢购</span>
              <span>全网秒杀</span>
            </p>
            <!-- 右图 -->
            <p class="list_p2">
              <img src="./images/a02.png" alt="">
            </p>
          </li>
          <li>
            <!-- 左文 -->
            <p class="list_p1">
              <span>爆款砍价</span>
              <span>免费拿</span>
            </p>
            <!-- 右图 -->
            <p class="list_p2">
              <img src="./images/a03.png" alt="">
            </p>
          </li>
          <li>
            <!-- 左文 -->
            <p class="list_p1">
              <span>识货团购</span>
              <span>品牌特卖</span>
            </p>
            <!-- 右图 -->
            <p class="list_p2">
              <img src="./images/a04.png" alt="">
            </p>
          </li>
          <li>
            <!-- 左文 -->
            <p class="list_p1">
              <span>专业鉴别</span>
              <span>六大品类</span>
            </p>
            <!-- 右图 -->
            <p class="list_p2">
              <img src="./images/a05.png" alt="">
            </p>
          </li>
        </ul>
      </div>
      <!-- 5-商品列表 -->
      <ul class="good_list">
        <!-- 商品-轮播图-定位 -->
        <li class="goods_buy">
          <img src="./images/pro_list01.png" alt="">
          <!-- 轮播选择器 -->
          <ul class="select">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </li>
        <!-- 舒肤佳 -->
        <li>
          <img src="./images/pro_list03.png" alt="">
          <p class="gp1">舒肤佳 皂香味香水 纯白清香型</p>
          <div>
            <p class="gp2">
              <span class="gs1">￥<span class="gs2">458</span></span>
              <span>798</span>
            </p>
            <p class="gp3">热度11.11w</p>
          </div>
          <p class="gp4">近期售出百件</p>
        </li>
        <!-- 鞋 -->
        <li>
          <img src="./images/pro_list02.png" alt="">
          <p class="gp1">李宁 韦德之道 全城9 青年版/棉花糖</p>
          <div>
            <p class="gp2">
              <span class="gs1">￥<span class="gs2">221</span></span>
              <span>￥599</span>
            </p>
            <p class="gp3">热度30.4w</p>
          </div>
          <p class="gp4">近期收藏上千</p>
        </li>
        <!-- 电脑壳 -->
        <li>
          <img src="./images/pro_list04.png" alt="">
          <p class="gp1">Casetify SLOWCOASTER Sticker MacBook Case 苹果电脑保护壳 MacBook Pro 14 2021</p>
          <div>
            <p class="gp2">
              <span class="gs1">￥<span class="gs2">439</span></span>
              <span>739</span>
            </p>
            <p class="gp3">热度7.1w</p>
          </div>
          <p class="gp4">近期浏览过万</p>
        </li>
        
      </ul>
    </div>
    <!-- 广告位-固定定位 -->
    <div class="ad_fixed">
      <img src="./images/ad_fixed.png" alt="">
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <ul>
        <li>
          <span class="iconfont icon-23"></span>
          <span>首页</span>
        </li>
        <li>
          <span class="iconfont icon-shequ-xianxing"></span>
          <span>社区</span>
        </li>
        <li>
          <span class="iconfont icon-icon"></span>
          <span>生活</span>
        </li>
        <li>
          <span class="iconfont icon-fenlei"></span>
          <span>分类</span>
        </li>
        <li onclick="window.location.href='./login.html'">
          <span class="iconfont icon-wode"></span>
          <span class="c_red"></span>
          <span>我的</span>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>